<!-- 消息列表 -->
<template>
	<view class="list">
		<view class="list-item" v-for="(item, index) in list" :key="index" @touchstart="handleTouchstart($event, index)"
			@touchmove="handleTouchmove" @touchend="handleTouchend" @click="handleNavToChatPage(item)"
			:style="{'transform': `translateX(${item.moveDistance}px)`}">
			<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
			<view class="content">
				<view class="header">
					<text class="name">{{item.name}}</text>
					<text class="datetime">{{item.datetime}}</text>
				</view>
				<view class="footer">
					<text class="label">{{item.label}}</text>
					<text class="count" v-if="item.count">{{item.count > 99 ? '99+': item.count}}</text>
				</view>
			</view>
			<button class="delete-btn" @click.stop="handleDelete(index)">删除</button>
		</view>
	</view>
	<!-- 用于获取删除按钮的物理宽度 -->
	<view id="delete-btn-width" style="width: 130rpx;"></view>
</template>

<script setup>
	import { ref } from "vue";
	import listBehavior from "./list-behavior.js";

	const list = ref([{
			avatar: '/pagesC-message/static/images/msg-reminding.svg',
			name: '互动消息',
			label: '您的提问有了新的回答',
			datetime: '14:37',
			count: 3,
			moveDistance: 0,
		},
		{
			avatar: '/pagesC-message/static/images/will-delete/1.png',
			name: '鱼米之乡农资站',
			label: '嗨～你好，有什么问题帮到您',
			datetime: '14:16',
			count: 110,
			moveDistance: 0,
		}, {
			avatar: '/pagesC-message/static/images/will-delete/2.png',
			name: '强哥农资服务部',
			label: '最近有优惠～',
			datetime: '14:00',
			count: 0,
			moveDistance: 0,
		}, {
			avatar: '/pagesC-message/static/images/will-delete/3.png',
			name: '德华农资门市',
			label: '亲，我现在不在线，商品还在',
			datetime: '11:37',
			count: 0,
			moveDistance: 0,
		}
	])
	// 列表的滑动行为
	const { handleTouchstart, handleTouchmove, handleTouchend } = listBehavior(list);


	// 跳转到聊天页面
	const handleNavToChatPage = (row) => {
		uni.navigateTo({
			url: '/pagesC-message/chat/index'
		});
	}

	// 删除
	const handleDelete = (index) => {
		uni.showModal({
			title: '提示',
			content: '确定要删除该消息吗',
			success: (res) => {
				if (!res.confirm) return;
				list.value.splice(index, 1);
			}
		})
	}
</script>

<style lang="scss" scoped>
	.list {
		overflow: hidden;
		margin-top: 20rpx;

		&-item {
			position: relative;
			display: flex;
			align-items: center;
			height: 142rpx;
			background-color: white;
			padding-left: 30rpx;
			transition: transform 0.2s;

			&::after {
				position: absolute;
				right: 0;
				bottom: 0;
				width: calc(100% - 140rpx);
				height: 1px;
				transform: scaleY(0.5);
				background-color: #E5E5E5;
				display: block;
				content: '';
			}

			.avatar {
				width: 94rpx;
				height: 94rpx;
				border-radius: 50%;
			}

			.content {
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 94rpx;
				margin-left: 16rpx;
				padding-right: 30rpx;


				.header {
					display: flex;
					align-items: center;

					.name {
						flex-grow: 1;
						width: 0;
						font-weight: bold;
						font-size: 30rpx;
						color: #222222;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.datetime {
						flex-shrink: 0;
						font-weight: 500;
						font-size: 22rpx;
						color: #999999;
					}
				}

				.footer {
					display: flex;
					align-items: center;

					.label {
						flex-grow: 1;
						width: 0;
						font-size: 28rpx;
						color: #999999;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.count {
						flex-shrink: 0;
						min-width: 34rpx;
						height: 34rpx;
						font-weight: 500;
						font-size: 22rpx;
						color: #FFFFFF;
						text-align: center;
						line-height: 34rpx;
						background: #FE3333;
						border-radius: 17rpx;
						padding: 0 10rpx;
						box-sizing: border-box;
					}
				}
			}

			.delete-btn {
				position: absolute;
				top: 0;
				right: -130rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 130rpx;
				height: 100%;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				background-color: #FE3333;

				&:active {
					background-color: #fe5740;
				}
			}
		}
	}
</style>